<template>
	<view class="order-confirm" v-if="user">
		<order-address-entrance-com></order-address-entrance-com>
		<order-products-com></order-products-com>
		<view class="price-info">
			<view class="price-info-title">价格明细</view>
			<view class="total-price">
				<view>商品总额</view>
				<view>￥{{ orderTotalAmount }}</view>
			</view>
			<view class="total-price">
				<view>提货卡</view>
				<view class="displaceesMoney">-￥{{ orderTotalAmount }}</view>
			</view>
		</view>
		<!-- <payment-choose-com :user="user" @paymentChosen="choosePayment"></payment-choose-com>
		<order-submit-button-com></order-submit-button-com> -->
		
		<view class="order-submit">
			<view class="buy-bottom">
				<view class="buy-bottom-left">
					<view>合计：</view>
					<view class="buy-bottom-money">
						<view>
							<text>￥</text>
							<text>0.00</text>
						</view>
					</view>
				</view>
				<view class="buy-now" @click="submitOrder">
					<image src="/static/images/buynow.png" mode=""></image>
					<view>确认提货</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from 'store'
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import AuthChecking from "mixins/AuthChecking"
	import CurrentUser from "mixins/CurrentUser"
	import OrderAddressEntranceCom from "components/order/confirm/OrderAddressEntranceCom"
	import OrderProductsCom from "components/order/confirm/OrderProductsCom"
	import OrderCouponCom from "components/order/confirm/OrderCouponCom"
	import OrderSubmitButtonCom from "components/order/confirm/OrderSubmitButtonCom"
	import PaymentChooseCom from "components/common/PaymentChooseCom"
	import { goodsDisplaces } from 'api/collageApi'
	
	export default {
		name: "confirm",
		store,
		mixins: [
			AuthChecking,
			CurrentUser
		],
		components: {
			PaymentChooseCom,
			OrderAddressEntranceCom,
			OrderProductsCom,
			OrderCouponCom,
			OrderSubmitButtonCom
		},
		data() {
			return {
				form: {}
			}
		},
		computed: {
			...mapGetters([
				'product',
				'selectedSku',
				'selectedSkuCount',
				'orderTotalAmount',
				'displacesCardId',
				'vipPriceSavingMoney',
				'orderTotalAmount',
				'orderCurrentTotalAmount',
				'selectedSku',
				'selectedSkuCount',
				'currentAddress',
				'orderPayment',
				'order',
				'product',
				'group_id'
			])
		},
		methods: {
			...mapActions([
				'updateVipPriceSavingMoney',
				'updateOrderTotalAmount',
				'updateOrderPayment'
			]),
			...mapMutations([
				'setOrder'
			]),
			async refreshSavingMoney() {
				const normalPrice = this.selectedSku.price
				const vipPrice = this.selectedSku.price_vip
				const normalMoney = normalPrice * this.selectedSkuCount
				const vipMoney = vipPrice * this.selectedSkuCount
				await this.updateVipPriceSavingMoney(normalMoney - vipMoney)
			},
			async getOrderTotalAmount() {
				let price = this.selectedSku.price
				price = this.selectedSku.price_vip
				let totalAmount = price * this.selectedSkuCount
				return totalAmount.toFixed(2)
			},
			async choosePayment(payment) {
				await this.updateOrderPayment(payment)
			},
			checkboxChange: function(e) {
				// console.log(e.detail.value[0])
			},
			submitOrder(){
				if (!this.currentAddress) {
					uni.showToast({
						title: '请选择收货地址'
					})
					return
				}
				let orderItems = []
				orderItems.push({
					sku_id: this.selectedSku.id,
					amount: this.selectedSkuCount
				})
				
				this.form.items = orderItems
				this.form.address_id = this.currentAddress.id
				this.form.order_id = this.displacesCardId
				goodsDisplaces(this.form).then(res=>{
					this.setOrder(res)
					uni.navigateTo({url: `/packs/pages/order/paid`})
				})
			}
		},
		async onReady() {
			await this.getCurrentUser()
			await this.refreshSavingMoney()
			await this.updateOrderTotalAmount(await this.getOrderTotalAmount())
			await this.updateOrderPayment('weixin')
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.order-confirm {
		padding: 20rpx;
		background: #F6F6F6;
		padding-bottom: 170rpx;
	}

	.price-info {
		width: 710rpx;
		padding-bottom: 26rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.price-info-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333330;
		margin-left: 24rpx;
		padding-top: 24rpx;
	}

	.total-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 26rpx;

		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333330;
		}

		>view:nth-child(2) {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333330;
		}
		>view.displaceesMoney{
			color: #FF4924;
		}
	}
	.checkbox-group{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(253, 245, 235, 0) 0%, #FDF5EB 100%);
		border-radius: 12rpx;
	}
	.lable{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}
	
	.open-vip-card-content{
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(253, 245, 235, 0) 0%, #FDF5EB 100%);
		border-radius: 12rpx;
	}

	.open-vip-card-box {
		width: 706rpx;
		height: 202rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 10rpx;
		padding: 2rpx;
	}

	.open-vip-card-title {
		width: 116rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F5DBBF;
		border-radius: 16rpx 0px 16rpx 0px;
		font-size: 20rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #613B23;
	}
	
	

	.open-vip-card-info {
		display: flex;
		align-items: center;

		>view:nth-child(1) {
			margin: 16rpx 0 0 70rpx;

			>view:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			>view:nth-child(2) {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}

			>view:nth-child(3) {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}

		>view:nth-child(2) {
			display: flex;
			align-items: baseline;
			margin: 0 26rpx 0 60rpx;

			>text:nth-child(1) {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}

			>text:nth-child(2) {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
			}
		}
	}
	.checked-box{
		margin-top:10rpx;
	}
	
	.order-submit{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1px #EEEEEE solid;
	}
	
	.buy-bottom {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding-bottom: 70rpx;
		justify-content: space-between;
		.buy-bottom-left{
			display: flex;
			>view:nth-child(1){
				margin:30rpx 5rpx 0 32rpx;
			}
		}
		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 34rpx;
		}
	}
	
	.buy-bottom-money {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 4rpx 0 0 0;
	
		>view:nth-child(1) {
			display: flex;
			align-items: baseline;
	
			>text:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
	
			>text:nth-child(2) {
				font-size: 48rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
				line-height: 66rpx;
			}
		}
	
		>view:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	
	.buy-now {
		width: 224rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin: 14rpx 20rpx 0 16rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	
		image {
			display: block;
			width: 224rpx;
			height: 72rpx;
			border-radius: 36rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}
	
		>view {
			position: relative;
			z-index: 1;
		}
	}
</style>
